// ModelingPager.tsx
import { View, Text, Image, ScrollView } from "@tarojs/components"
import Taro from "@tarojs/taro"
import "./index.scss"
import React, { useEffect, useState } from "react";

interface WaterfallItem {
  id: string | number;
  height: number;
  image: string;
  title: string;
  desc: string
  [key: string]: any;
}

const mockData: WaterfallItem[] = [
  {
    id: 1,
    height: Math.floor(Math.random() * 50) + 180, // 180-230px
    image: `https://qcloud.dpfile.com/pc/be84BkSwi0yIXe6JI1kEx7AXOnGbGFiNBNqhFrJHOAD0SH8sy_fRoi63pNvnpJlo.jpg`,
    title: "商务精英发型",
    desc: "干练利落，适合职场男士"
  },
  {
    id: 2,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/SeoTOUIug6fPWUVMIJvpYoSuBlydI_sVja820hJ1hRAfc-dMJkD_5syX1fNWrwV8.jpg`,
    title: "经典油头发型",
    desc: "复古绅士，展现成熟魅力"
  },
  {
    id: 3,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://q7.itc.cn/images01/20250725/97e000a48ad74024b135c3d80191566e.jpeg`,
    title: "时尚Undercut",
    desc: "两侧剃短，顶部留长，潮流之选"
  },
  {
    id: 4,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/2CD08F4LSPuVxVe-04i7JGhlaAsHvDkCaVy4IQHM6O3LGChcZyc5rt217mHqjnZS.jpg`,
    title: "韩式纹理烫",
    desc: "自然蓬松，打造暖男形象"
  },
  {
    id: 5,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://p5.itc.cn/q_70/images03/20200824/a652cc7e81164bf6b4846e4500c42d39.jpeg`,
    title: "美式板寸头",
    desc: "简洁硬朗，阳刚之气十足"
  },
  {
    id: 6,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/hY5shoKYgRx54YVs4C6R7nWURPyp1ryCYWjHDwpzjRvpqTg87z100tVJ1qsK6cPl.jpg`,
    title: "日系微长发",
    desc: "文艺慵懒，展现个性风格"
  },
  {
    id: 7,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/Qs6C8k-UsWoDfpdNpL86iaXONbp99OOOO_Of22JXY78XyPEkpUqfdIUZwCbbB1Xz.jpg`,
    title: "渐变短发",
    desc: "层次分明，技术感强烈"
  },
  {
    id: 8,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/uc7HiNzdHVVyBoV9ZfMnoq4NnDaMwgFGPV6Mas4aM-iWuNpRCk5lQzhHOkJFKAf8.jpg`,
    title: "复古中分发型",
    desc: "经典回归，文艺青年首选"
  },
  {
    id: 9,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/45MqVXHiaJ8UMpTb6n8iF1CWVvmEX5LUEOwoYwaRUXFpZx3r7oUAILhtTEl9N8t1.jpg`,
    title: "飞机头发型",
    desc: "个性张扬，酷感十足"
  },
  {
    id: 12,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/geh90Zsoe7CWdYXl78GS_RirQ4SYvEP5xmHYw8sLdVsLny8PcuWNnkiBsh18aMLo.jpg`,
    title: "时尚脏辫",
    desc: "街头文化，个性鲜明"
  },
  {
    id: 13,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://pic1.zhimg.com/v2-c1e9bf476dd774949ebc07fc769d3370_r.jpg`,
    title: "英伦后梳",
    desc: "优雅绅士，复古韵味"
  },
  {
    id: 15,
    height: Math.floor(Math.random() * 50) + 180,
    image: `https://qcloud.dpfile.com/pc/j7lujnsSI-WLVeq40cvTfIs4ZErjn3qrwc7fSsDAkYv0BcvM2QuJz-KrMhB5wT1V.jpg`,
    title: "自然碎发",
    desc: "随性自然，日常百搭"
  }
];

const ExamplePager: React.FC = () => {
  const [data, setData] = useState<WaterfallItem[]>([]);

  useEffect(() => {
    setData(mockData);
  }, []);

  return (
    <ScrollView
      scrollY
      style={{
        height: '100vh',
        backgroundColor: '#f7f7f7'
      }}
      className="waterfall-scrollview"
    >
      <View className="waterfall-container">
        {data.map(item => (
          <View key={item.id} className="waterfall-item">
            <Image
              src={item.image}
              mode="aspectFill"
              className="waterfall-image"
              style={{ height: `${item.height}px` }}
            />
            <View className="waterfall-content">
              <View className="waterfall-title">{item.title}</View>
              <View className="waterfall-desc">{item.desc}</View>
            </View>
          </View>
        ))}

      </View>
      <View className={'bottom'}></View>
    </ScrollView>
  );
};

export default ExamplePager
